<!DOCTYPE html>
<html class="ui-page-login" ng-app="cms">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-treeview.css" />
		<link rel="stylesheet" href="css/font-awesome.min93e3.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-treeview.js"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/angular.js"></script>
		<script type="text/javascript" src="js/angular/controller.js"></script>
		<script src="js/app.js"></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}
			
			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
			/*问题反馈在setting页面单独的css*/
			
			#feedback .mui-popover {
				position: fixed;
			}
			
			#feedback .mui-table-view:last-child {
				margin-bottom: 0px;
			}
			
			#feedback .mui-table-view:first-child {
				margin-top: 0px;
			}
			/*问题反馈在setting页面单独的css==end*/
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">设　置</h1>
		</header>
		<div class="mui-content" ng-controller="userInfo">
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media" id="infodiv">
					<a class="mui-navigate-right" href="#account">
						<img class="mui-media-object mui-pull-left head-img" id="head-img" src="{{user.picurl}}">
						<div class="mui-media-body">
							{{user.username}}
							<p class='mui-ellipsis'>账号:{{user.account}}</p>
						</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell" id="collectdiv">
					<a href="#account" class="mui-navigate-right">我的收藏</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell" id="lookdiv">
					<a href="#account" class="mui-navigate-right">我的浏览</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a href="#about" class="mui-navigate-right">关于NUAACMS<i class="mui-pull-right update">V1.0.0</i></a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<div align="center">
					<button type="button" class="mui-btn mui-btn-danger" id="logout">退出登录</button>
				</div>
			</ul>

		</div>
	</body>

</html>
<script>
	document.getElementById("logout").addEventListener("tap", function() {
		mui.confirm('提示', '确认退出？', ['取消', '确认'], function(e) {
			if(e.index == 1) {
				app.setState(null);
				mui.openWindow({
					"id": "login_page",
					"url": "login.html",
					"crateNew": false
				});
			}
		}, 'div')
	})

	//更换信息
	document.getElementById("infodiv").addEventListener("tap", function() {
		mui.openWindow({
			"id": new Date(),
			"url": "userInfo.html",
			"crateNew": false,
			"styles": {
				top: '0px', //mui标题栏默认高度为45px
				bottom: '50px' //默认为0px，可不定义
			}
		});
	})
	
	document.getElementById("collectdiv").addEventListener("tap",function(){
		mui.openWindow({
			"id": new Date(),
			"url": "collectInfo.html",
			"crateNew": false,
			"styles": {
				top: '0px', //mui标题栏默认高度为45px
				bottom: '50px' //默认为0px，可不定义
			}
		});
	})
	
	document.getElementById("lookdiv").addEventListener("tap",function(){
		mui.openWindow({
			"id": new Date(),
			"url": "lookInfo.html",
			"crateNew": false,
			"styles": {
				top: '0px', //mui标题栏默认高度为45px
				bottom: '50px' //默认为0px，可不定义
			}
		});
	})
</script>